<template>
  <div class="domainview">
    <el-dialog title="域名查看" :visible.sync="dialogDomainVisible" :before-close="handleClose">
      <div class="searchbox">
        <el-input placeholder="请输入要搜索的域名" v-model="formData.domainName" class="input-with-select">
          <el-button slot="append" icon="el-icon-search" @click="searchDomain"></el-button>
        </el-input>
      </div>
      <el-table :data="domainListData" style="margin-bottom: 20px">
        <el-table-column property="domainName" label="域名"></el-table-column>
        <el-table-column property="platName" label="平台名称"></el-table-column>
        <el-table-column property="templateVersion" label="版本号"></el-table-column>
        <el-table-column property="releaseUpdateTime" label="更新时间"></el-table-column>
      </el-table>
      <el-pagination
        background
        layout="prev, pager, next"
        :total="total"
        :page-size="formData.pageSize"
        :current-page="formData.pageNum"
        @current-change="SetPage"
      ></el-pagination>
    </el-dialog>
  </div>
</template>
<script>
import { getPageDomainList } from "@/api/basisMG";
export default {
  props: {
    DomainDialogVisible: {
      type: Boolean,
      default: false,
    },
    ID: {
      type: String,
    },
  },
  data() {
    return {
      dialogDomainVisible: false,
      formData: {
        appitemId: "",
        templateId: "",
        domainName: "",
        pageNum: 1,
        pageSize: 10,
      },
      total: 0,
      domainListData: [],
    };
  },
  methods: {
    // 弹出框关闭后触发
    handleClose() {
      // 子组件调用父组件方法，并传递参数
      this.$emit("changeShow", "false");
    },
    // 分页
    SetPage(e) {
      this.formData.pageNum = e;
      this.getPageDomainList();
    },
    searchDomain() {
      this.getPageDomainList();
    },
    async getPageDomainList() {
      this.formData.templateId = this.ID;
      const res = await getPageDomainList(this.formData);
      if (res.code === '200') {
        this.domainListData = res.data.content;
        this.total = res.data.total;
      } else {
        this.domainListData = [];
      }
    }
  },
  watch: {
    // 监听 DomainDialogVisible 改变
    DomainDialogVisible(oldVal, newVal) {
      this.formData.pageNum = 1;
      this.dialogDomainVisible = this.DomainDialogVisible;
      this.getPageDomainList();
    }
  }
};
</script>
<style lang="scss"></style>
